<template>
  <div class="game-detail">
    <!-- 顶部装饰性标题 -->
    <div class="game-header">
      <el-button type="primary" @click="goToHome" class="back-home-btn" round>
        <i class="el-icon-arrow-left"></i> 返回主页
      </el-button>
      <h1 class="header-title">探索 {{ game?.name || '游戏世界' }}</h1>
      <div class="header-decoration"></div>
    </div>

    <!-- 游戏资料 -->
    <div v-if="game && !showGame" class="game-section">
      <el-card class="game-card">
        <div class="game-card-inner">
          <img :src="game.imageUrl" alt="游戏图片" class="game-image" />
          <div class="game-info">
            <h2>{{ game.name }}</h2>
            <p><strong>游戏简介:</strong> {{ game.description }}</p>
            <p><strong>开发商:</strong> {{ game.developer }}</p>
            <p><strong>发布日期:</strong> {{ game.releaseDate }}</p>
            <div class="game-tags">
              <el-tag v-for="tag in ['自制', '官方']" :key="tag" type="success" effect="dark" size="small">{{ tag }}</el-tag>
            </div>
            <el-button type="primary" @click="startGame" round>
              <i class="el-icon-caret-right"></i> 开始游戏
            </el-button>
          </div>
        </div>
      </el-card>
      <div class="extra-info">
        <el-card class="info-card">
          <h3>游戏亮点</h3>
          <ul class="highlight-list">
            <li>用户自主上传</li>
            <li>游戏方便快捷</li>
          </ul>
        </el-card>
      </div>

      <!-- 评论区域 -->
      <div class="comments-section">
        <h3>用户评论</h3>
        <div v-if="currentUser" class="comment-form">
          <el-input
            v-model="newComment"
            type="textarea"
            :rows="3"
            placeholder="请输入你的评论"
          ></el-input>
          <el-button type="primary" @click="submitComment(null, null)" :disabled="!newComment.trim()">提交评论</el-button>
        </div>
        <div v-else class="login-prompt">
          <p>请登录后发表评论</p>
          <el-button type="primary" @click="router.push('/login')">登录</el-button>
        </div>
        <div class="comment-list">
          <!-- 渲染一级评论（主评论） -->
          <el-card v-for="comment in parentComments" :key="comment.id" class="comment-item">
            <p>{{ comment.content }}</p>
            <div class="comment-meta">
              <span>用户名称: {{ comment.userName }}</span>
              <span>{{ formatDate(comment.createdAt) }}</span>
              <el-button
                v-if="currentUser"
                type="info"
                size="small"
                @click="showReplyForm(comment.id)"
              >回复</el-button>
              <el-button
                v-if="currentUser && currentUser.id === comment.userId"
                type="danger"
                size="small"
                @click="deleteComment(comment.id)"
              >删除</el-button>
              <el-button
                v-if="currentUser"
                :type="comment.isLikedByCurrentUser ? 'danger' : 'primary'"
                size="small"
                @click="toggleLike(comment.id, comment.isLikedByCurrentUser)"
              >
                {{ comment.isLikedByCurrentUser ? '取消点赞' : '点赞' }}
              </el-button>
              <span class="like-count" :class="{ 'liked': comment.isLikedByCurrentUser }">
                  {{ comment.likeCount || 0 }} 点赞
              </span>
            </div>
            <div v-if="replyFormVisible === comment.id" class="reply-form">
              <el-input
                v-model="replyContent"
                type="textarea"
                :rows="2"
                placeholder="请输入回复"
              ></el-input>
              <el-button type="primary" @click="submitComment(comment.id, comment.id)" :disabled="!replyContent.trim()">提交回复</el-button>
            </div>
            <!-- 渲染二级评论（直接回复主评论或二级评论的评论） -->
            <div class="replies">
              <el-card v-for="reply in getReplies(comment.id)" :key="reply.id" class="reply-item">
                <p>
                  <span class="reply-target">回复 用户名称: {{ getParentUserName(reply.parentId) }}</span>
                  {{ reply.content }}
                </p>
                <div class="comment-meta">
                  <span>用户名称: {{ reply.userName }}</span>
                  <span>{{ formatDate(reply.createdAt) }}</span>
                  <el-button
                    v-if="currentUser"
                    type="info"
                    size="small"
                    @click="showReplyForm(reply.id)"
                  >回复</el-button>
                  <el-button
                    v-if="currentUser && currentUser.id === reply.userId"
                    type="danger"
                    size="small"
                    @click="deleteComment(reply.id)"
                  >删除</el-button>
                  <el-button
                    v-if="currentUser"
                    :type="reply.isLikedByCurrentUser ? 'danger' : 'primary'"
                    size="small"
                    @click="toggleLike(reply.id,reply.isLikedByCurrentUser)"
                  >
                    {{ reply.isLikedByCurrentUser ? '取消点赞' : '点赞' }}
                  </el-button>
                  <span class="like-count" :class="{ 'liked': comment.isLikedByCurrentUser }">
                  {{ reply.likeCount || 0 }} 点赞
                  </span>
                </div>
                <div v-if="replyFormVisible === reply.id" class="reply-form">
                  <el-input
                    v-model="replyContent"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入回复"
                  ></el-input>
                  <el-button type="primary" @click="submitComment(reply.id, comment.id)" :disabled="!replyContent.trim()">提交回复</el-button>
                </div>
              </el-card>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <!-- 游戏内容 -->
    <div v-if="showGame" class="game-content">
      <el-button type="primary" @click="showGame = false" class="back-button" round>
        <i class="el-icon-arrow-left"></i> 返回
      </el-button>
      <iframe :src="gameResources" width="100%" height="600px" frameborder="0" class="game-iframe"></iframe>
    </div>

    <!-- 加载动画 -->
    <div v-if="loading" class="loading-overlay">
      <el-icon class="loading-icon"><i class="el-icon-loading"></i></el-icon>
      <p>加载中，请稍候...</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import request from '../axios/request';
import { useAuthStore } from '../stores/userStore';
import { ElMessage } from 'element-plus';

const store = useAuthStore();
const router = useRouter();
const route = useRoute();
const likeCount = ref(null); 
const gameId = route.params.id;
const game = ref(null);
const gameResources = ref('');
const showGame = ref(false);
const loading = ref(false);
const comments = ref([]);
const newComment = ref('');
const replyContent = ref('');
const replyFormVisible = ref(null);

const pageKey = computed(() => {
  const storedPageKey = sessionStorage.getItem('pageKey');
  return storedPageKey || `${route.path || '/game'}-${Math.random().toString(36).substr(2, 9)}`;
});

const currentUser = computed(() => store.getActiveUser(pageKey.value));

// 计算一级评论（parent_id 为 null）
const parentComments = computed(() => {
  return comments.value.filter(comment => !comment.parentId);
});

// 获取二级评论（直接回复一级评论或二级评论的评论）
const getReplies = (mainId) => {
  return comments.value.filter(comment => comment.mainId === mainId);
};

// 获取父评论的 userName
const getParentUserName = (parentId) => {
  const parentComment = comments.value.find(comment => comment.id === parentId);
  return parentComment ? parentComment.userName : '未知';
};

// 获取用户名称（如果后端未返回 userName）
const getUserNameById = (userId) => {
  const comment = comments.value.find(c => c.userId === userId);
  if (comment) return comment.userName;
  return currentUser.value && currentUser.value.id === userId ? currentUser.value.userName : '未知用户';
};

onMounted(async () => {
  
    await fetchGameDetail();
    await fetchComments();

});

// 监听 comments 变化，确保 UI 实时更新
watch(comments, (newComments) => {
  console.log('Comments updated:', newComments);
});

const fetchGameDetail = async () => {
  try {
    const res = await request({
      url: `/games/listId?id=${gameId}`,
      method: 'get',
    });
    if (res.data.code === 200) {
      game.value = res.data.data;
    } else {
      ElMessage.error('加载游戏详情失败');
    }
  } catch (err) {
    console.error('请求失败:', err);
    ElMessage.error('请求失败，请检查网络');
  }
};

// 点赞/取消点赞（假设已实现）
const toggleLike = async (commentId, likedByMe) => {
  try {
    const res = await request({
      url: `/comments/toggleLike`,
      method: 'post',
      data: {
        "commentId":commentId,
        "like": !likedByMe, // 传递目标状态
        "userId": currentUser.value.id
      },
      pageKey: pageKey.value,
    });
    if (res.data.code === 200) {
      fetchComments();
    } else {
      console.error('获取游戏详情失败:', res.data.msg);
      ElMessage.error('加载游戏详情失败');
    }
  } catch (err) {
    console.error('请求失败:', err);
    ElMessage.error('请求失败，请检查网络');
  }
};

const startGame = async () => {
  loading.value = true;
  try {
    const res = await request({
      url: `/games-url/start?id=${gameId}`,
      method: 'get',
    });
    if (res.status === 200) {
      gameResources.value = URL.createObjectURL(new Blob([res.data], { type: 'text/html' }));
      showGame.value = true;
    } else {
      console.error('获取游戏资源失败:', res.data.msg);
      ElMessage.error('加载游戏失败');
    }
  } catch (err) {
    console.error('请求失败:', err);
    ElMessage.error('请求失败，请检查网络');
  } finally {
    loading.value = false;
  }
};

const fetchCommentsLikes = async (gameId,userId) => {
  try {
    const res = await request({
      url: '/comment-likes/getCommentLikes',
      method: 'get',
      data:{
        "gameId":gameId,
        "userId":userId
      },
      pageKey: pageKey.value,
    });
    if (res.data.code === 200) {
      return res.data.data;
    } else {
      console.error('获取评论失败:', res.data.msg);
      ElMessage.error('加载评论失败');
    }
  } catch (err) {
    console.error('请求失败:', err);
    ElMessage.error('请求失败，请检查网络');
  }
};

const fetchComments = async () => {
  try {
    const res = await request({
      url: '/comments/list',
      method: 'post',
      data:{
        gameId:gameId,
        userId:currentUser.value?.id
      }
    });
    if (res.data.code === 200) {
      comments.value = res.data.data || [];
    } else {
      console.error('获取评论失败:', res.data.msg);
      ElMessage.error('加载评论失败');
    }
  } catch (err) {
    console.error('请求失败:', err);
    ElMessage.error('请求失败，请检查网络');
  }
};

const submitComment = async (parentId,mainId) => {
  if (!currentUser.value) {
    ElMessage.error('请先登录');
    router.push('/');
    return;
  }
  try {
    const res = await request({
      url: '/comments/add',
      method: 'post',
      data: {
        userId: currentUser.value.id,
        gameId: gameId,
        content: parentId ? replyContent.value : newComment.value,
        parentId: parentId,
        mainId: mainId
      },
      pageKey: pageKey.value,
    });
    if (res.data.code === 200) {
      ElMessage.success(parentId ? '回复发布成功' : '评论发布成功');
      if (parentId) {
        replyContent.value = '';
        replyFormVisible.value = null;
      } else {
        newComment.value = '';
      }
      // 直接更新 comments.value
      const newCommentData = res.data.data; // 后端返回的新评论
      if (newCommentData) {
        // 如果后端未返回 userName，使用 userId 查找
        newCommentData.userName = newCommentData.userName || getUserNameById(newCommentData.userId);
        comments.value = [newCommentData, ...comments.value.filter(c => c.id !== newCommentData.id)];
      } else {
        await fetchComments(); // 如果后端未返回新评论，重新获取
      }
    } else {
      console.error('评论发布失败:', res.data.msg);
      ElMessage.error('评论发布失败');
    }
  } catch (err) {
    console.error('发布评论失败:', err);
    ElMessage.error('请求失败，请检查网络');
  }
};

const deleteComment = async (commentId) => {
  if (!currentUser.value) {
    ElMessage.error('请先登录');
    router.push('/login');
    return;
  }
  try {
    const res = await request({
      url: '/comments/delete?commentId='+commentId,
      method: 'delete',
      pageKey: pageKey.value,
    });
    if (res.data.code === 200) {
      ElMessage.success('评论删除成功');
      // 直接更新 comments.value
      // 
      await fetchComments();
    } else {
      console.error('删除失败:', res.data.msg);
      ElMessage.error('删除失败');
    }
  } catch (err) {
    console.error('删除评论失败:', err);
    ElMessage.error('请求失败，请检查网络');
  }
};

const showReplyForm = (commentId) => {
  replyFormVisible.value = commentId;
};

const formatDate = (date) => {
  if (!date) return 'Invalid Date';
  try {
    const parsedDate = new Date(date);
    if (isNaN(parsedDate.getTime())) {
      throw new Error('Invalid date format');
    }
    return parsedDate.toLocaleString();
  } catch (e) {
    console.error('Invalid date format:', date);
    return 'Invalid Date';
  }
};

const goToHome = () =>{
  if(currentUser){
    router.push('/gamelist');
  } else {
    router.push('/');
  }
}
</script>

<style scoped>
.game-detail {
  padding: 30px;
  max-width: 1200px;
  margin: 0 auto;
  background: #f0f4f8;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Header */
.game-header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.back-home-btn {
  position: absolute;
  top: 10px;
  left: 20px;
  background: #e74c3c;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  color: #fff;
  transition: transform 0.2s ease;
}

.back-home-btn:hover {
  transform: scale(1.05);
}

.header-title {
  font-size: 2.5rem;
  color: #2c3e50;
  font-weight: 700;
  margin: 0;
}

.header-decoration {
  width: 120px;
  height: 5px;
  background: linear-gradient(90deg, #409eff, #67c23a);
  margin: 10px auto;
  border-radius: 2px;
}

/* Game Section */
.game-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.game-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.game-card-inner {
  display: flex;
  align-items: center;
  gap: 30px;
}

.game-image {
  max-width: 400px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.game-info {
  flex: 1;
}

.game-info h2 {
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 15px;
}

.game-info p {
  font-size: 1.1rem;
  color: #7f8c8d;
  margin: 10px 0;
  line-height: 1.6;
}

.game-tags {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

.game-tags .el-tag {
  margin-right: 0;
  font-size: 1rem;
}

.el-button {
  background: linear-gradient(90deg, #409eff, #67c23a);
  border: none;
  padding: 12px 30px;
  font-size: 1.1rem;
  border-radius: 25px;
  color: #fff;
  transition: transform 0.2s ease, background-color 0.3s;
}

.el-button:hover {
  transform: scale(1.05);
  background: linear-gradient(90deg, #67c23a, #409eff);
}

/* Extra Info */
.extra-info {
  margin-top: 20px;
}

.info-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.info-card h3 {
  font-size: 1.6rem;
  color: #2c3e50;
  margin-bottom: 15px;
}

.highlight-list {
  list-style-type: disc;
  padding-left: 25px;
  color: #7f8c8d;
  font-size: 1rem;
  line-height: 1.8;
}

/* Game Content */
.game-content {
  position: relative;
  margin-top: 20px;
}

.back-button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  background: #e74c3c;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  color: #fff;
  transition: transform 0.2s ease;
}

.back-button:hover {
  transform: scale(1.05);
}

.game-iframe {
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 700px;
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-icon {
  font-size: 50px;
  color: #fff;
  animation: spin 1s linear infinite;
}

.loading-overlay p {
  color: #fff;
  font-size: 1.4rem;
  margin-top: 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Comments Section */
.comments-section {
  margin-top: 40px;
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.comments-section h3 {
  font-size: 1.8rem;
  color: #2c3e50;
  margin-bottom: 25px;
  border-bottom: 2px solid #409eff;
  padding-bottom: 10px;
}

.comment-form {
  margin-bottom: 20px;
}

.comment-form .el-input {
  margin-bottom: 15px;
  border-radius: 8px;
  font-size: 1rem;
}

.comment-form .el-button {
  width: 100%;
  padding: 12px 30px;
  font-size: 1.1rem;
  border-radius: 25px;
}

.login-prompt {
  text-align: center;
  padding: 20px;
  background: #f1f1f1;
  border-radius: 8px;
  margin-bottom: 20px;
}

.login-prompt p {
  color: #7f8c8d;
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.comment-list {
  padding-right: 10px;
}

.comment-item {
  margin-bottom: 25px;
  padding: 20px;
  border-radius: 10px;
  background: #f9f9f9;
  transition: background 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.comment-item:hover {
  background: #f1f1f1;
}

.comment-item p {
  font-size: 1.1rem;
  color: #34495e;
  margin: 0 0 15px 0;
  line-height: 1.8;
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: #95a5a6;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
}

.comment-meta .el-button {
  padding: 8px 15px;
  font-size: 0.9rem;
  border-radius: 20px;
}

.reply-form {
  margin: 15px 0;
  padding: 15px;
  background: #f1f1f1;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.reply-form .el-input {
  margin-bottom: 15px;
  border-radius: 8px;
  font-size: 1rem;
}

.reply-form .el-button {
  width: 100%;
  padding: 12px 30px;
  font-size: 1.1rem;
  border-radius: 25px;
}

.replies {
  margin-top: 15px;
  padding-left: 20px;
  border-left: 3px solid #409eff;
}

.reply-item {
  margin-bottom: 15px;
  padding: 15px;
  background: #eef2f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e0e0;
}

.reply-item p {
  font-size: 1rem;
  color: #34495e;
  margin: 0 0 10px 0;
  line-height: 1.8;
}

.reply-target {
  color: #409eff;
  font-weight: bold;
  font-style: italic;
  margin-right: 5px;
}

.reply-item .comment-meta {
  font-size: 0.85rem;
}

.like-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 12px;
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
  color: white;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, background 0.3s ease;
}

.like-count.liked {
  background: linear-gradient(90deg, #ff4d4d, #ff8c8c);
  transform: scale(1.1);
}

.like-count::before {
  content: "👍";
  font-size: 16px;
  margin-right: 4px;
}

.like-count:hover {
  transform: scale(1.05);
  background: linear-gradient(90deg, #ff6b6b, #ff9a9a);
}

.like-count .el-icon {
  vertical-align: middle;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .game-detail {
    padding: 20px;
    max-width: 100%;
  }

  .game-header {
    margin-bottom: 30px;
  }

  .back-home-btn {
    padding: 8px 15px;
    font-size: 14px;
  }

  .header-title {
    font-size: 2rem;
  }

  .header-decoration {
    width: 100px;
  }

  .game-card {
    padding: 15px;
  }

  .game-card-inner {
    gap: 20px;
  }

  .game-image {
    max-width: 300px;
  }

  .game-info h2 {
    font-size: 1.8rem;
  }

  .game-info p {
    font-size: 1rem;
  }

  .game-tags .el-tag {
    font-size: 0.9rem;
  }

  .el-button {
    padding: 10px 25px;
    font-size: 1rem;
  }

  .info-card {
    padding: 15px;
  }

  .info-card h3 {
    font-size: 1.4rem;
  }

  .highlight-list {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .game-iframe {
    height: 500px;
  }

  .back-button {
    padding: 8px 15px;
    font-size: 14px;
  }

  .loading-icon {
    font-size: 40px;
  }

  .loading-overlay p {
    font-size: 1.2rem;
  }

  .comments-section {
    padding: 15px;
  }

  .comments-section h3 {
    font-size: 1.6rem;
    margin-bottom: 20px;
  }

  .comment-form .el-input {
    font-size: 0.9rem;
  }

  .comment-form .el-button {
    padding: 10px 25px;
    font-size: 1rem;
  }

  .login-prompt p {
    font-size: 1rem;
  }

  .comment-item {
    padding: 15px;
  }

  .comment-item p {
    font-size: 1rem;
  }

  .comment-meta {
    font-size: 0.85rem;
  }

  .comment-meta .el-button {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  .reply-form {
    padding: 10px;
  }

  .reply-form .el-input {
    font-size: 0.9rem;
  }

  .reply-form .el-button {
    padding: 10px 25px;
    font-size: 1rem;
  }

  .reply-item {
    padding: 10px;
  }

  .reply-item p {
    font-size: 0.9rem;
  }

  .reply-item .comment-meta {
    font-size: 0.8rem;
  }

  .like-count {
    padding: 2px 6px;
    font-size: 0.85rem;
  }

  .like-count::before {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .game-detail {
    padding: 15px;
  }

  .game-header {
    margin-bottom: 20px;
  }

  .back-home-btn {
    top: 5px;
    left: 10px;
    padding: 8px 15px;
    font-size: 14px;
  }

  .header-title {
    font-size: 1.8rem;
  }

  .header-decoration {
    width: 80px;
    height: 4px;
  }

  .game-card {
    padding: 10px;
  }

  .game-card-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .game-image {
    max-width: 100%;
    width: 100%;
  }

  .game-info {
    width: 100%;
  }

  .game-info h2 {
    font-size: 1.6rem;
  }

  .game-info p {
    font-size: 1rem;
    margin: 8px 0;
  }

  .game-tags {
    margin: 15px 0;
    gap: 8px;
  }

  .game-tags .el-tag {
    font-size: 0.9rem;
  }

  .el-button {
    padding: 10px 20px;
    font-size: 1rem;
    width: 100%;
  }

  .info-card {
    padding: 10px;
  }

  .info-card h3 {
    font-size: 1.3rem;
  }

  .highlight-list {
    font-size: 1rem;
    line-height: 1.8;
    padding-left: 20px;
  }

  .game-iframe {
    height: 400px;
  }

  .back-button {
    top: 5px;
    left: 5px;
    padding: 8px 15px;
    font-size: 14px;
  }

  .loading-icon {
    font-size: 40px;
  }

  .loading-overlay p {
    font-size: 1.2rem;
  }

  .comments-section {
    padding: 10px;
  }

  .comments-section h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
  }

  .comment-form .el-input {
    font-size: 1rem;
  }

  .comment-form .el-button {
    padding: 10px 20px;
    font-size: 1rem;
  }

  .login-prompt p {
    font-size: 1rem;
  }

  .comment-item {
    padding: 10px;
    margin-bottom: 15px;
  }

  .comment-item p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .comment-meta {
    font-size: 0.9rem;
    gap: 8px;
  }

  .comment-meta .el-button {
    padding: 8px 15px;
    font-size: 0.9rem;
  }

  .reply-form {
    padding: 8px;
  }

  .reply-form .el-input {
    font-size: 1rem;
  }

  .reply-form .el-button {
    padding: 10px 20px;
    font-size: 1rem;
  }

  .replies {
    padding-left: 15px;
  }

  .reply-item {
    padding: 8px;
  }

  .reply-item p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .reply-item .comment-meta {
    font-size: 0.9rem;
  }

  .like-count {
    padding: 3px 8px;
    font-size: 0.9rem;
  }

  .like-count::before {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .game-detail {
    padding: 10px;
  }

  .back-home-btn {
    top: 5px;
    left: 5px;
    padding: 6px 12px;
    font-size: 12px;
  }

  .header-title {
    font-size: 1.5rem;
  }

  .header-decoration {
    width: 60px;
    height: 3px;
  }

  .game-card {
    padding: 8px;
  }

  .game-image {
    max-width: 100%;
  }

  .game-info h2 {
    font-size: 1.4rem;
  }

  .game-info p {
    font-size: 0.9rem;
  }

  .game-tags .el-tag {
    font-size: 0.8rem;
  }

  .el-button {
    padding: 8px 15px;
    font-size: 0.9rem;
  }

  .info-card {
    padding: 8px;
  }

  .info-card h3 {
    font-size: 1.2rem;
  }

  .highlight-list {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .game-iframe {
    height: 300px;
  }

  .back-button {
    padding: 6px 12px;
    font-size: 12px;
  }

  .loading-icon {
    font-size: 30px;
  }

  .loading-overlay p {
    font-size: 1rem;
  }

  .comments-section h3 {
    font-size: 1.3rem;
  }

  .comment-form .el-input {
    font-size: 0.9rem;
  }

  .comment-form .el-button {
    padding: 8px 15px;
    font-size: 0.9rem;
  }

  .login-prompt p {
    font-size: 0.9rem;
  }

  .comment-item {
    padding: 8px;
  }

  .comment-item p {
    font-size: 0.9rem;
  }

  .comment-meta {
    font-size: 0.85rem;
  }

  .comment-meta .el-button {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  .reply-form .el-input {
    font-size: 0.9rem;
  }

  .reply-form .el-button {
    padding: 8px 15px;
    font-size: 0.9rem;
  }

  .replies {
    padding-left: 10px;
  }

  .reply-item {
    padding: 6px;
  }

  .reply-item p {
    font-size: 0.9rem;
  }

  .reply-item .comment-meta {
    font-size: 0.8rem;
  }

  .like-count {
    padding: 2px 6px;
    font-size: 0.85rem;
  }

  .like-count::before {
    font-size: 14px;
  }
}
</style>